<template>
  <div class="activity">
    <div v-if="state.detail">
      <ImgT class="imgs" v-if="state.detail" :key="state.detail" :src="state.detail" alt="" />
      <!-- <nut-button class="submit" @click="submit">{{ t("share") }}</nut-button> -->
    </div>
    <!-- 新手活动 -->
    <begineer v-if="activityItem?.id == '10005'" :activityItem="activityItem"></begineer>
    <!-- 首存X3 -->
    <firstDeposit v-if="activityItem?.id == '8001'" :activityItem="activityItem"></firstDeposit>
    <div class="bottom-wrap" v-if="![10005, 8001].includes(Number(activityItem?.id))">
      <nut-button class="submit" @click="submit">{{ t("share") }}</nut-button>
    </div>
    <!-- 分享弹窗 -->
    <shareModal v-model:visible="visible"></shareModal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import shareModal from "@/views/me/components/shareModal.vue";
import { Page } from "@/store/page";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { useRoute } from "vue-router";
// import { User } from "@/store/user";
import { useI18n } from "vue-i18n";
import { Local } from "@/utils/storage";
import begineer from "./components/begineer.vue";
// 首存X3
import firstDeposit from "./components/firstDeposit.vue";
import { langObjMap } from "@/enums/langEnum";
const { adminI18n, lang } = storeToRefs(Page(pinia));
const { t } = useI18n();
const route = useRoute();
const visible = ref(false);

const activityItem = ref();
const state: any = reactive({
  detail: null,
});

const submit = () => {
  visible.value = true;
};

onMounted(async () => {
  const content: any = route.query.content;
  const item = Local.get("activityItem");
  console.log(7777777, item);
  activityItem.value = item;
  if (content) {
    const langKey = langObjMap[lang.value] || lang.value;
    state.detail = adminI18n.value[langKey][content] || "";
  } else {
    state.detail = route.query.pic_content;
  }
});
onUnmounted(() => { });
onUnmounted(() => { });
</script>

<style lang="scss" scoped>
.activity {
  // height: calc(var(--vh, 1vh) * 100 - 46px);
  padding: 10px 14px 80px 14px;
  overflow-y: auto;

  .imgs {
    width: 100%;
  }
}

.bottom-wrap {
  position: fixed;
  height: 64px;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #131232;
  box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
}

.submit {
  width: 65%;
  margin: 10px auto;
  height: 40px;
  border-radius: 8px;
  display: block;
}
</style>
